<template>
	<view>
		<view class="top-img">
			<img src="../../static/img1.jpg" alt="" style="width: 100%; height: 100%;">
		</view>
		<view class="no-course" style="width: 100%;height: 110rpx;" v-if="courseList.length ===0  ">
		      暂无选课信息~
		</view>
		
			<view class="audition-container" v-else>
			    <view class="audition-content" v-for="(item,index) in courseList" :key="index">
					<view class="title-name">
						<view class="ac-name">{{item.name}} </view>
						<view class="ac-name">{{item.courseName}} </view>
					</view>
					
					<view class="ac-subject">开始时间： <test style="color: #000;">{{item.startTime}}</test> </view>
					 <view class="ac-subject">结束时间：<test style="color: #000;">{{item.stopTime}}</test></view>
					<view class="button" >
						<u-button type="primary" style="width: 200rpx;" @click="applicateBtn(item)">报名</u-button>
					</view>
				</view>
			</view>
		
	</view>
</template>

<script>
	import {
		getEventsSetMeal,getEventsMeal
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				courseList:[]
			}
		},
		onLoad() {
			this.getEventsSetMeal()
			
		},
		methods: {
			async getEventsSetMeal() {
				uni.showLoading()
				const data = {
					// subjectId: this.subjectId
				}
				const res = await getEventsSetMeal(data)
				if (res.code === 200) {
					uni.hideLoading()
					const arr = res.data.map(value=>{
						return{
							...value,
							type:1
						}
					})
					this.courseList.push(...arr)
				}
			const resTwo = await getEventsMeal(data)
			if (resTwo.code === 200) {
				uni.hideLoading()
				console.log("resTwo.data",resTwo.data);
				const arrTwo = resTwo.data.map(value=>{
					return{
						...value,
						type:0
					}
				})
				this.courseList.push(...arrTwo)
			}
			console.log("this.courseList",this.courseList);
			},
			applicateBtn(item){
				uni.navigateTo({
				  url: './applicateOnlineQuestion?item=' +JSON.stringify(item) ,
				})
			},
		}
	}
</script>

<style>
.top-img{
	width: 100%;
	height: 250rpx;
}
	.no-course{
		text-align: center;
		margin-top: 200rpx;
		color: #908c8c;
	}
	.audition-content{
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		position: relative;
	}
	.ac-name{
		font-weight: bold;
		font-size: 32rpx;
	}
	.ac-subject{
		color: #aaa8a8;
		margin-top: 10rpx;
	}
	.ac-actime{
		width:100%;
		padding: 8rpx 18rpx;
		margin: 10rpx auto;
		background-color: #f9e6ca;
		color: #ff9800 ;
	}
	.title-name{
		display: flex;
		justify-content: space-between;
	}
	.button{
		margin-top: 20rpx;
		margin-left: 60%;
	}
</style>
